<template>
  <div class="feedback-test">
    <h1 class="text-2xl font-bold mb-6">反馈功能测试</h1>
    
    <div class="test-controls mb-6">
      <button @click="addTestMessage" class="btn btn-primary mr-2">
        添加测试消息
      </button>
      <button @click="clearMessages" class="btn btn-secondary">
        清空消息
      </button>
    </div>
    
    <div class="messages-container">
      <div v-if="messages.length === 0" class="empty-state">
        <p class="text-gray-500">点击"添加测试消息"开始测试</p>
      </div>
      
      <ChatMessage
        v-for="message in messages"
        :key="message.id"
        :message="message"
        @feedback="handleFeedback"
      />
    </div>
    
    <div class="debug-info mt-6 p-4 bg-gray-100 rounded">
      <h3 class="font-semibold mb-2">调试信息:</h3>
      <pre class="text-sm">{{ JSON.stringify(debugLogs, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ChatMessage from '@/components/chat/ChatMessage.vue'
import type { ChatItem, Feedbacktype } from '@/types/app'

const messages = ref<ChatItem[]>([])
const debugLogs = ref<any[]>([])

const addTestMessage = () => {
  const message: ChatItem = {
    id: `test_${Date.now()}`,
    content: `这是一条测试消息 #${messages.value.length + 1}。请点击下方的点赞或踩一踩按钮来测试反馈功能。`,
    isAnswer: true,
    message_files: [],
    agent_thoughts: []
  }
  
  messages.value.push(message)
  addDebugLog('添加了新消息', { messageId: message.id })
}

const clearMessages = () => {
  messages.value = []
  debugLogs.value = []
}

const handleFeedback = async (messageId: string, feedback: Feedbacktype) => {
  console.log('父组件收到反馈事件:', { messageId, feedback })
  addDebugLog('收到反馈事件', { messageId, feedback })
  
  try {
    console.log('开始模拟API调用...')
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    console.log('API调用完成')
    
    // 更新消息的反馈状态
    const message = messages.value.find(m => m.id === messageId)
    if (message) {
      console.log('找到消息，更新反馈状态:', message)
      message.feedback = feedback
      addDebugLog('反馈更新成功', { messageId, feedback })
      console.log('消息反馈状态已更新:', message.feedback)
    } else {
      console.log('未找到消息:', messageId)
      addDebugLog('未找到消息', { messageId })
    }
  } catch (error) {
    console.error('反馈处理失败:', error)
    addDebugLog('反馈处理失败', { messageId, error })
  }
}

const addDebugLog = (action: string, data: any) => {
  debugLogs.value.unshift({
    timestamp: new Date().toLocaleTimeString(),
    action,
    data
  })
  
  // 限制日志数量
  if (debugLogs.value.length > 10) {
    debugLogs.value = debugLogs.value.slice(0, 10)
  }
}
</script>

<style scoped>
.feedback-test {
  @apply max-w-4xl mx-auto p-6;
}

.test-controls {
  @apply flex gap-2;
}

.btn {
  @apply px-4 py-2 rounded font-medium transition-colors;
}

.btn-primary {
  @apply bg-blue-500 text-white hover:bg-blue-600;
}

.btn-secondary {
  @apply bg-gray-500 text-white hover:bg-gray-600;
}

.messages-container {
  @apply space-y-4 min-h-48;
}

.empty-state {
  @apply text-center py-8;
}

.debug-info {
  @apply max-h-64 overflow-y-auto;
}
</style> 